<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>富文本demo</title>
</head>
<body>

<div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<form method="post" action="editorSubmit" enctype="multipart/form-data">
    <textarea id="text1" style="width:100%; height:200px; display: none;" name="textarea"></textarea>
    <input type="submit" value="提交">
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="__ROOT__/__JS__/wangEditor/wangEditor.js"></script>
<script type="text/javascript">
    var myDate = new Date();
    var E = window.wangEditor;
    var editor = new E('#div1');
    var $text1 = $('#text1');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html);
    }
    editor.customConfig.uploadImgServer = 'submitPicture';
    editor.customConfig.uploadImgMaxLength = 5;
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    editor.customConfig.uploadFileName = 'fileList[]';
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            alert("1：" + xhr + "请查看你的json格式是否正确，图片上传了，但是并没有回显");
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            alert("2：" + xhr + "请查看你的json格式是否正确，图片并没有上传");
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.data;
            for(var i=0; i<=url.length; i++){
                insertImg(url[i]);
            }
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }

    editor.create();
    // 初始化 textarea 的值
    $text1.val(editor.txt.html());
</script>
</body>
</html>